import axios from 'axios';
import type { AxiosRequestConfig, AxiosInstance, AxiosResponse } from 'axios';
import { ElLoading, ElMessage } from 'element-plus';
import { LoadingInstance } from 'element-plus/lib/components/loading/src/loading';

// 定义接口
interface LXRequestInterceptors {
  requestInterceptor?: (config: AxiosRequestConfig) => AxiosRequestConfig;
  requestInterceptorCatch?: (err: any) => any;
  responseInterceptor?: (config: AxiosResponse) => AxiosResponse;
  responseInterceptorCatch?: (err: any) => any;
}

// 继承，让LXRequestConfig拥有axios AxiosRequestConfig属性和自定义属性
interface LXRequestConfig extends AxiosRequestConfig {
  interceptor?: LXRequestInterceptors;
  showLoading?: boolean;
}

class LXRequest {
  instance: AxiosInstance;
  interceptor?: LXRequestInterceptors;
  loading?: LoadingInstance;
  showLoading?: boolean;
  constructor(config: LXRequestConfig) {
    this.instance = axios.create(config);
    this.interceptor = config.interceptor;

    this.instance.interceptors.request.use(
      this.interceptor?.requestInterceptor,
      this.interceptor?.requestInterceptorCatch
    );
    this.instance.interceptors.response.use(
      this.interceptor?.responseInterceptor,
      this.interceptor?.responseInterceptorCatch
    );

    // 全局添加的响应处理
    this.instance.interceptors.request.use(
      (config) => {
        // config.headers.token='dasfasdfdsf'
        if (this.showLoading) {
          this.loading = ElLoading.service({
            lock: true,
            text: '正在请求中。。。'
          });
        }
        return config;
      },
      (err) => {
        return err;
      }
    );

    this.instance.interceptors.response.use(
      (res) => {
        this.showLoading === true ? this.loading?.close() : '';
        return res.data;
      },
      (error) => {
        // console.log(error.response);

        this.showLoading === true ? this.loading?.close() : '';
        console.log(error.response.status, 'err');

        if (error.request) {
          console.log(error.request);
        } else if (error.response) {
          console.log(error.response.data);
          console.log(error.response.status);
        }
        if (error && error.response) {
          switch (error.response.status) {
            case 400:
              ElMessage.error('请求错误(400)');
              break;
            case 401:
              ElMessage.error('未授权，请重新登录(401)');
              break;
            case 403:
              ElMessage.error('拒绝访问(403)');
              break;
            case 404:
              ElMessage.error('请求路径不存在(404)');
              break;
            case 408:
              ElMessage.error('请求超时(408)');
              break;
            case 500:
              ElMessage.error('服务器错误(500)');
              break;
            case 501:
              ElMessage.error('服务未实现(501)');
              break;
            case 502:
              ElMessage.error('网络错误(502)');
              break;
            case 503:
              ElMessage.error('服务不可用(503)');
              break;
            case 504:
              ElMessage.error('网络超时(504)');
              break;
            case 505:
              ElMessage.error('HTTP版本不受支持(505)');
              break;
            default:
              ElMessage.error(`连接出错(${error.response.status})!`);
          }
        } else {
          ElMessage.error('连接服务器失败!');
        }
        return error;
      }
    );
  }

  request(config: LXRequestConfig) {
    return new Promise((resolve, reject) => {
      if (config.interceptor?.requestInterceptor) {
        config = config.interceptor.requestInterceptor(config);
      }
      this.showLoading = config.showLoading ?? true;

      this.instance
        .request(config)
        .then((res: any) => {
          this.showLoading = false;
          resolve(res);
        })
        .catch((err: any) => {
          this.showLoading = false;
          reject(err);
          return err;
        });
    });
  }
}

export default LXRequest;
